<template>
    <div class="data-info" v-loading="loading">
        <div class="condition">
            <span>状态：</span>
            <el-select v-model="condition.status" style="width: 80px" class="r5" @on-change="search">
                <el-option value="all" label="全部"/>
                <el-option value="yes" label="启用"/>
                <el-option value="no" label="禁用"/>
            </el-select>
            <el-button type="primary" @click="roleAdd">添加角色</el-button>
        </div>
        <el-table :data="data">
            <el-table-column prop="name" label="角色名"></el-table-column>
            <el-table-column prop="description" label="描述"></el-table-column>
            <el-table-column label="状态">
                <template slot-scope="{row}">
                    <a class="success" v-if="row.status == 1" @click="changeStatus(row, 0)">启用</a>
                    <a class="red" v-else @click="changeStatus(row, 1)">禁用</a>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <a class="r5 blue" @click="editRole(row)">编辑</a>
                    <a class="r5 green" @click="authRole(row)">权限</a>
                    <a class="r5 red" @click="deleteRole(row)">删除</a>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import rule from './components/rule';
    import save from './components/save';
    import {getRole, rolePostDel, roleStatus} from "@/api";

    export default {
        data() {
            return {
                data: []
                , loading: false
                , btnload: 0
                , condition: {
                    status: 'all'
                }
            }
        }
        , created() {
            this.search();
        }
        , methods: {
            //获取角色列表
            search() {
                this.loading = true;
                getRole(this.condition, (data) => {
                    this.loading = false;
                    this.data = data.lists;
                }, () => {
                    this.loading = false;
                })
            }
            , roleAdd() {
                this.$drawer({
                    title: '添加规则',
                    component: save,
                    data: null,
                    close: this.search,
                });
            }
            , changeStatus(row, status) {
                this.loading = true;
                roleStatus({id: row.id, status: status}, () => {
                    row.status = status;
                    this.loading = false;
                }, () => {
                    this.loading = false;
                })
            }
            , editRole(row) {
                this.$drawer({
                    title: '添加规则',
                    component: save,
                    data: row,
                    close: this.search,
                });
            }
            , authRole(row) {
                this.$drawer({
                    title: '权限设置',
                    component: rule,
                    data: row,
                    close: this.search,
                });
            }
            , deleteRole(row) {
                this.$confirm('确定删除该角色？', () => {
                    this.loading = true;
                    rolePostDel({id: row.id}, () => {
                        this.search();
                    }, () => {
                        this.loading = false;
                    })
                })
            }
        }
    }
</script>

<style scoped>

</style>
